<template>
  <div class="bottom-nav-bar">
    <router-link
      v-for="i in items"
      :key="i.id"
      :to="i.path"
      :class="
        i.path == default_active
          ? 'link active nav-icon-wrapper current'
          : 'link  nav-icon-wrapper current'
      "
    >
      <i :class="'nav-icons iconfont ' + i.icon" id="icon-movie"></i>
      <span style="font-size: 12px">{{ i.text }}</span>
    </router-link>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        {
          id: 1,
          text: "电影",
          path: "/movie/_hot",
          icon: "icon-dianying",
        },
        {
          id: 2,
          text: "资讯",
          path: "/information",
          icon: "icon-zixun",
        },
        {
          id: 3,
          text: "视频",
          path: "/video",
          icon: "icon-shipin",
        },
        {
          id: 4,
          text: "我的",
          path: "/user",
          icon: "icon-wode",
        },
      ],
      default_active: "/movie/_hot",
    };
  },
  methods: {
    watch_path_change_active() {
      this.default_active = this.items.filter((item) => item.path == this.$route.path)[0].path;
    },
  },
  mounted() {
    this.watch_path_change_active()
  },
};
</script>
<style>
.bottom-nav-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  border-top: 0.01rem solid #d8d8d8;
  display: flex;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 11;
}
.bottom-nav-bar .nav-icon-wrapper {
  width: 0.5rem;
  height: 0.96rem;
  box-sizing: border-box;
  color: #696969;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bottom-nav-bar .active {
  color: #f03d37;
}
</style>